<template>
  <div>
    <div class="tabBox-wrap">
      <!-- {{radeZj}} -->
      <div class="content-wrap">
        <div class="article-title">
          <p>2021年投资健康度画像</p>
          <span></span>
        </div>

        <el-row class="canvas-row" :gutter="30">
          <el-col :span="12" class="canvas-col">
            <MapCanvas :data="mapData" :mapSelectChange="radeSelectChange" />
          </el-col>
          <el-col :span="12" class="canvas-col">
            <!-- <div class="select-box">
              <span>雷达图区域选择：</span>
              <el-select v-model="radeSelectAreaId" placeholder="请选择区域" size="mini" @change="radeSelectChange">
                <el-option v-for="item in radeSelectOptions" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
              </el-select>
            </div>-->
            <div class="canvas">
              <RadeCanvas :cityData="singleData" :radeZj="radeZj" />
            </div>
          </el-col>
        </el-row>

        <div class="tips-wrapper">
          <el-popover placement="right" title="健康度画像打分说明" width="500" trigger="hover">
            <TipsMask />
            <el-button type="warning" round slot="reference" size="mini" icon="el-icon-warning-outline">打分说明</el-button>
          </el-popover>

          <el-button type="primary" round slot="reference" size="mini" icon="el-icon-right" @click="toLink">查看详细信息</el-button>
        </div>
        <div class="tableBox">
          <el-table :data="tableData" stripe size="mini" class="tableTh28" border v-loading="tableLading" max-height="420">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              v-for="(item,index) in clounms"
              :key="index"
              :width="item.width"
              :minWidth="item.minWidth"
              :align="item.align"
              :sortable="item.sortable"
              :render-header="item.renderHeader"
            >
              <template slot-scope="scope">
                <template v-if="item.slot">
                  <template v-if="item.slot=='sort'">
                    <span>{{scope.row.sort}}</span>
                  </template>
                  <template v-if="item.slot=='diffValue'">
                    <span>{{scope.row.diffValue&&scope.row.diffValue||'0.0'}}</span>
                  </template>
                </template>

                <template v-else>
                  <span>{{ scope.row[item.prop]}}</span>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";

import MapCanvas from "./mapCanvas.vue";
import RadeCanvas from "./radeCanvas.vue";
import TipsMask from "./tipsMask.vue";
export default {
  components: {
    MapCanvas,
    RadeCanvas,
    TipsMask,
  },
  data() {
    return {
      clounms: [
        {
          label: "排名",
          prop: "sort",
          width: "100",
          align: "left",
          slot: "sort",
        },
        {
          label: "区域",
          prop: "areaName",
          minWidth: "100",
          align: "left",
        },
        {
          label: "总分",
          prop: "totalScore",
          minWidth: "100",
          sortable: true,
          align: "left",
        },
        {
          label: "存量效益",
          prop: "clValue",
          minWidth: "100",
          sortable: true,
          align: "left",
        },
        {
          label: "增量效益",
          prop: "zlValue",
          minWidth: "100",
          sortable: true,
          align: "left",
        },
        {
          label: "网络效能",
          prop: "wlValue",
          minWidth: "100",
          sortable: true,
          align: "left",
        },
        {
          label: "投资管控",
          prop: "tzValue",
          minWidth: "100",
          sortable: true,
          align: "left",
        },
        {
          label: "趋势调整",
          prop: "trendValue",
          minWidth: "100",
          sortable: true,
          align: "left",
          renderHeader: this.customFieldColumn,
        },
        {
          label: "差异修正",
          prop: "diffValue",
          minWidth: "100",
          sortable: true,
          align: "left",
          renderHeader: this.customFieldColumn,
          slot: "diffValue",
        },
      ],
      radeSelectOptions: [],
      radeCityData: [],
      singleData: {},
      radeZj: {},
      mapData: [],
      tableLading: false,
      tableData: [],
      radeSelectAreaId: "2",
      zjRadeData: [],
      areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getYearPortraitList();
    },

    radeSelectChange(v) {
      const { radeCityData } = this;

      let newdata = radeCityData.filter((i) => i.areaId == v);

      console.log(newdata);

      this.singleData = newdata[0];
    },
    async getYearPortraitList() {
      try {
        this.tableLading = true;
        let result = await this.fetch($budgetAPI.getYearPortraitList, {});

        let res = result.dataList;
        this.tableData = res.map((item, index) => {
          return {
            ...item,
            sort: index + 1,
          };
        });

        this.radeSelectOptions = res.map((item, index) => {
          return {
            areaId: item.areaId,
            areaName: item.areaName,
          };
        });
        this.mapData = res.map((item, index) => {
          return {
            areaName: item.areaName,
            value: item.totalScore,
            areaId: item.areaId,
          };
        });

        this.radeCityData = res.map((item, index) => {
          return {
            areaId: item.areaId,
            areaName: item.areaName,

            //  let radarArr = ["存量效益", "投资管理", "网络效能", "增量效益"];

            list: [
              {
                name: "存量效益",
                value: item.clValue,
                radePrecent: item.clRadarValue,
              },
              {
                name: "投资管理",
                value: item.tzValue,
                radePrecent: item.tzRadarValue,
              },
              {
                name: "网络效能",
                value: item.wlValue,
                radePrecent: item.wlRadarValue,
              },
              {
                name: "增量效益",
                value: item.zlValue,
                radePrecent: item.zlRadarValue,
              },
            ],
          };
        });

        this.singleData = this.radeCityData[0];

        this.radeZj = {
          areaName: "浙江",
          // clAvg: result.clAvg,
          // tzAvg: result.tzAvg,
          // wlAvg: result.wlAvg,
          // zlAvg: result.zlAvg,

          list: [
            {
              name: "存量效益",
              value: result.clAvg,
              radePrecent: 1,
            },
            {
              name: "投资管理",
              value: result.tzAvg,
              radePrecent: 1,
            },
            {
              name: "网络效能",
              value: result.wlAvg,
              radePrecent: 1,
            },
            {
              name: "增量效益",
              value: result.zlAvg,
              radePrecent: 1,
            },
          ],
        };
      } catch (error) {
        console.log(error);
      } finally {
        this.tableLading = false;
      }
    },
    customFieldColumn(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, ""),
        h(
          "el-popover",
          {
            props: {
              placement: "top",
              width: "200",
              trigger: "hover",
              content:
                "包括地区差异修正、核心枢纽楼差异修正、共建共享差异修正等",
            },
          },
          [
            h(
              "span",
              {
                slot: "reference",
                style: {
                  fontWeight: 600,
                },
              },
              [
                h("span", {}, column.label),
                h(
                  "span",
                  {
                    style: {
                      transform: "rotate(180deg)",
                      display: "inline-block",
                    },
                  },
                  "ⓘ"
                ),
              ]
            ),
          ]
        ),
      ]);
    },
    toLink() {
      this.$router.push({
        path: "/budget/investPortrayal",
        query: {
          flag: true,
        },
      });
    },
    fetch(action, params) {
      return new Promise((resolve, reject) => {
        action(
          { ...params },
          (res) => {
            if (res.code === 0) {
              resolve(res.content);
            } else {
              reject({});
            }
          },
          (err) => {}
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tabBox-wrap {
  padding: 10px 0 15px;
  width: inherit;
  //   height: 500px;
  //   background: pink;

  .content-wrap {
    width: 100%;
    // height: 500px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 15px 30px -10px rgba(0, 0, 0, 0.1);
    padding: 0px 20px 30px;
    box-sizing: border-box;
  }

  .canvas-row .canvas-col {
    height: 550px;

    .select-box {
      height: 30px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      box-sizing: border-box;
      padding: 0 30px;
    }

    .canvas {
      height: calc(100% - 30px);
    }
  }

  .tips-wrapper {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 10px;
    // background: pink;
    .right-btn {
      cursor: pointer;
    }
    .left-tips {
      display: flex;
      align-items: center;
      border-radius: 100px;
      border: 2px solid #ffae02;
      padding: 2px 15px;
      font-size: 13px;
      cursor: pointer;

      i {
        font-size: 16px;
        color: #ffae02;
        font-weight: 600;
        margin-right: 5px;
      }
    }
  }
}

.article-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding: 15px 10px;
  position: relative;
  span {
    color: rgba(0, 0, 0, 0.4);
  }
  &::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    height: calc(100% - 35px);
    width: 5px;
    transform: translate(0, -50%);
    background-color: #0086ff;
  }
}
#barLine {
  height: 400px;

  //   width: 100%;
  //   background: red;
}
</style>